<template>
  <div class="movieUpload">
    <h4>上传视频demo</h4>
    <div>
      <span type="primary" class="wrapper">
        <label class="btn" for="fileUpload">上传视频demo</label>
      </span>
      <input
        type="file"
        accept="video/*"
        id="fileUpload"
        style="position:absolute; clip:rect(0 0 0 0);"
        @change="uploadVideo($event)"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'movieUpload',
  data () {
    return {
    }
  },
  methods: {
    uploadVideo (e) {
      // e.target.value文件名
      var file = e.target.files[0]
      var formdata = new FormData()
      formdata.append('fileStream', file)
      console.log('正在上传视频...')
      this.doUpload(formdata)
    },
    doUpload (formdata) {
      this.axios.post('/teacher/doUpload', formdata).then(res => {
        if (res.data.success) {
          console.log('上传成功')
        } else {
          console.log('上传失败')
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style>
input.file {
  position: relative;
  -moz-opacity: 0;
  opacity: 0;
  z-index: 2;
}
.wrapper {
  color: #fff;
  background-color: #31b0d5;
  border-color: #269abc;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
</style>
